<template>
	<view>
		<!-- 顶部菜单 star-->				
		<view class="is-nav">
			<view v-if="active === 0" class="is-nav-li is-center is-grey" @tap="toorder">
				OTC接单		
			</view>
			<view v-if="active !== 0" class="is-nav-li is-center is-grey" @tap="closeorder">
				首页
			</view>
			<view class="is-nav-li is-center is-blue is-active">
				{{active === 0 ? '进行中' : 'OTC接单'}}
			</view>
			<view class="is-nav-li is-size-14 is-online" :class="[online === false ? 'is-red-color is-bold' : 'is-blue']">
				{{online === false ? '离线' : '在线'}}
			</view>
		</view>			
		<!-- 顶部菜单 end -->
		<view class="bg-f">
			<view v-show="listok == 1" class="has-pd-20 s-row ma-order" v-for="(item,index) in listorder" :key="index">
				<view class="is-col-5 is-left ma-box">
					<image :src="item.ma_type_img" mode=""></image>
				</view>
				<view class="is-col-14">
					<view class="is-bold">{{item.order_no}}</view>
					<view class="is-grey">￥{{item.total_fee_true}}</view>
				</view>
				<view class="is-col-5 is-right">
					<button type="primary" class="is-btn" @tap="grabinfo(item.id)">处理</button>
				</view>
			</view>
		</view>
		<!-- 没有订单 star-->
		<view v-show="listok == 0" class="is-no-order">
			<view class="no-order-ico"><image src="../../static/img/common/none.png" mode=""></image></view>
			<view class="has-pd-10 is-grey" @tap="historyorder">
				查看历史抢单
			</view>
		</view>
		<!-- 没有订单 end-->
		<!-- 底部导航 -->
		<view class="is-foot bg-f footmemu is-center">
			<view class="is-col-4 has-pdtb-4" @tap = "closeorder">
				<image src="../../static/tabbar/home.png" mode=""></image>
				<text class="is-block">首页</text>
			</view>
			<view class="is-col-5 has-pdtb-4">
				<image src="../../static/tabbar/orderH.png" mode=""></image>
				<text class="is-blue is-block">接单</text>
			</view>
			<view class="is-col-6 has-pdtb-4"  @tap="goshare">
				<image src="../../static/tabbar/share.png" mode=""></image>
				<text class="is-block">邀请赚钱</text>
			</view>
			<view class="is-col-5 has-pdtb-4" @tap="gohome">
				<image src="../../static/tabbar/my.png" mode=""></image>
				<text class="is-block">我的</text>
			</view>
			<view class="is-col-4 has-pdtb-4" @tap="gochat">
				<image src="../../static/tabbar/kefu.png" mode=""></image>
				<text class="is-block">客服</text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>
<script>
	var _self;
	var lordertime = null;
	export default {
		data() {
			return {
				showLeft: false,
				showRight: false,
				foxtoken:'',
				foxcode:'',
				foxactive:'',
				memu:[],
				userinfo:[],
				user_money_can:0,
				fox_money_can:0,
				fox_user_jihuo:1,
				online:false,
				ma_lock:0,
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				listorder:[],
				listok:0,
				uid:0,
				user_tel:'',
				ma_type_img:'',
				active:0
			}
		},
		onLoad() {	
			_self = this;
			let info = this.service.getfox();
			let active = uni.getStorageSync('active');
			this.active = active;
			if(info[0]){
				//console.log(info[0])				
				this.foxtoken = info[0]['foxtoken'];
				//uni.clearStorageSync();
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_userinfo_home',
					method:'POST',
					data: {
						user_key: this.foxtoken
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						// var rest = JSON.stringify(res);
						// console.log(res)
						var rest = res.data;
						if(rest.status == 'success'){
							this.userinfo = rest.msg;
							this.ma_lock = this.userinfo['ma_lock'];
							this.uid= this.userinfo['user_id'];
							this.user_tel= this.userinfo['user_name'];
							this.fox_money_can = this.userinfo['diamondset']['diamond_money_can'];
							this.fox_user_jihuo = this.userinfo['diamondset']['diamond_user_jihuo'];
							//console.log(this.userinfo)
						}else if(rest.status == 'error'){
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
						}else{
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
						}
					}
				})
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			this.memu = this.service.memu;
			let that = this
			this.online = that.$websocket.getters.sendStatus;
			this.openOrderlist();
		},

		computed: {
			socketMsgs() {
				return this.$websocket.getters.socketMsgs
			},
			neworder() {
				return this.listorder
			},
			onlines(){
				let that = this
				return that.$websocket.getters.sendStatus
			}
		},
		watch:{
			'socketMsgs': {
				//处理接收到的消息
				handler: function() {
					let that = this
					let sMsg = that.socketMsgs
					// console.log(sMsg)
					this.domsg(sMsg);
				  }
			},
			neworder: {
				handler: (val, olVal) => {
					let a = Object.keys(val).length;
					let b = Object.keys(olVal).length;
					let music = uni.getStorageSync('music');
					if(b==0 && a >0){
						if(music === true){
							_self.OrdernewAudio();
						}
					}else if(b>0 && a >0){
						if(JSON.stringify(val) !== JSON.stringify(olVal)){
							if(music === true){
								_self.OrdernewAudio();
							}
						}
					}
				},
				deep: true
			},
			onlines: {
				handler:(Val)=>{
					_self.online = Val;
					_self.LineAuto(_self.online);
				},
				deep:true
			}
		},
		methods: {
			domsg:function(sMsg){
				if(sMsg.type == 'listorder'){
					if(sMsg.data.list.length >0){
						this.listorder = sMsg.data.list;
						this.listok = 1;
						// console.log(this.listorder)
					}else{
						this.listok = 0;
					}
				}
			},
			openOrderlist() {
				clearInterval(lordertime)
				let that = this
				// if(that.$websocket.getters.socketIsOpen === false){
				// 	that.$websocket.dispatch('webSocketInit');
				// }				
				if(!that.$websocket.getters.orderOpenl){
					lordertime = setInterval(()=>{
						that.$websocket.commit('setUser_key',this.foxtoken);
						that.$websocket.commit('webSocketOrderl');	
					},1000)	;
					that.$once('hook:beforeDestroy', () => { 
						_self.clearTimer();
					})
				}
			},
			closeorder() {
				let that = this
				this.clearTimer();
				that.$websocket.commit('webSocketOrderl_shut');
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			toorder(){
				let that = this
				this.clearTimer();
				that.$websocket.commit('webSocketOrderl_shut');
				uni.reLaunch({
					url:'./orderline'
				})
			},
			grabinfo(id){
				uni.reLaunch({
					url:'./xorderdo?id='+id
				})
			},
			tohome(){
				uni.reLaunch({
					url:'./index'
				})
			},
			gochat(){
				uni.reLaunch({
					url:'/pages/index/chat'
				})				
			},
			historyorder(){
				uni.navigateTo({
					url:'../order/history_order'
				})
			},
			gohome(){
				uni.reLaunch({
					url:'/pages/member/homes'
				})
			},
			goshare(){
				uni.reLaunch({
					url:'/pages/member/my_shares'
				})
			},
			clearTimer() {
				if(lordertime){
					clearInterval(lordertime);
					lordertime = null;				
				}
				let that = this
				that.$websocket.commit('webSocketOrder_shut');
			}
		},
		onShow:function() {    //页面关闭时清除定时器
			let that = this
			console.log(lordertime)
		},
		beforeDestroy(){
			let that = this
			this.clearTimer();
			that.$websocket.commit('webSocketOrderl_shut');
		},
		destroyed() {
			let that = this
			this.clearTimer();
			that.$websocket.commit('webSocketOrderl_shut');
		},
		onUnload:function(){  
		    let that = this
		    this.clearTimer();
		    that.$websocket.commit('webSocketOrderl_shut'); 
		}
	}
</script>

<style>
	.is-no-order{
		text-align: center;
		margin-top:300rpx;
	}
	.no-order-ico image{
		width:180rpx;
		height: 180rpx;
	}
  .ma-box image {width:100upx;height: 100upx;}
</style>
